<template>

    <div class="content-container">
        这是通过父子组件切换的页面
        <div class="feature-list">
            <div class="feature-item">
                <span class="title">优点</span>
                <ul>
                    <li>无缝切换：无需页面刷新，保持应用状态</li>
                    <li>性能更优：复用组件实例，减少资源消耗</li>
                    <li>状态保持：父组件状态可在子组件间共享</li>
                    <li>代码复用：相似界面可共享组件逻辑</li>
                    <li>适合复杂交互：如向导表单、标签页切换等场景</li>
                </ul>
            </div>

            <div class="feature-item">
                <span class="title">缺点</span>
                <ul>
                    <li style="color: red;">URL不变化：无法通过URL直接定位特定视图</li>
                    <li style="color: red;">浏览器导航限制：无法使用前进/后退按钮切换视图</li>
                    <li>SEO不友好：搜索引擎难以抓取动态切换的内容</li>
                    <li>代码耦合：组件间逻辑可能变得复杂</li>
                    <li>内存占用：长期存在的组件可能造成内存泄漏</li>
                </ul>
            </div>

            <div class="feature-item">
                <span class="title">适用场景</span>
                <ul>
                    <li>局部视图切换：如表格筛选条件切换、表单分步填写</li>
                    <li>高频切换需求：如标签页、侧边栏菜单切换</li>
                    <li>需要保持状态的场景：如多步骤表单、实时编辑界面</li>
                    <li>复杂交互组件：如可折叠面板、动态表单生成器</li>
                    <li>需要SEO的场景慎用：重要内容建议通过路由实现</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>

</script>

<style scoped>
/* 定义页面主体内容区域样式 */
.content-container {
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 24px;
    background: #fff;
    text-align: center;
    /* 增大字体大小 */
    font-size: 24px;
    /* 设置字体颜色 */
    color: #333;
}

.feature-list {
    width: 100%;
    margin: 24px auto;
    max-width: 900px;
}

.feature-item {
    text-align: left;
    margin: 24px 0;
    padding: 16px;
    background: #f5f5f5;
    border-radius: 8px;
}

.feature-item .title {
    text-align: center;
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #1890ff;
}
</style>